<template>
    <div>
      <el-container>
        <el-header>
          <Head/>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <Aside/>
          </el-aside>
          <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$router.currentRoute.name!='/home'">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
            </el-breadcrumb>
            <div v-if="$router.currentRoute.path == '/'" class="content">
              图书借阅系统
            </div>
           <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
import Head from "@/components/Head.vue";
import Aside from "@/components/Aside.vue";

export default {
  name: "Index",
  components: {Aside, Head}
}
</script>

<style scoped>
  .content{
     text-align: center;
     font-weight: bold;
     font-size: 30px;
     font-family: 华文楷体;
     padding-top: 50px;
    color: #409EFF;
  }
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  text-align: center;
  line-height: 200px;
}

.el-main {
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
